<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ice="http://www.icesoft.com/icefaces/component">
    <h:head>
    </h:head>
    <h:body>
        <ui:composition template="./template/template.xhtml">
            <ui:define name="content">
                <!--logged-->
                <ice:panelGroup rendered="#{userManager.loggedIn}" >
                    <ice:panelGrid columns="2" style="vertical-align: top;">
                        <ice:panelGroup>
                            <ice:panelGrid columns="2" style="vertical-align: top; padding: 0px;  margin: 0px;">
                                <ice:panelGroup style="vertical-align: top;" >
                                    <h5 class="box_heading" style="padding: 3px; margin: 0px;">Users Connected</h5>
                                    <div style="height:380px; overflow-y:auto; overflow-x: hidden; width: 100px; vertical-align: top;" id="users" >
                                        <ice:dataTable value="#{chatBean.userList}" var="currentu">
                                            <ice:column>
                                                <ice:outputText value="#{currentu}" style=" font-weight: bold; color: #FF8C00 " />
                                            </ice:column>
                                        </ice:dataTable>
                                    </div>
                                </ice:panelGroup>
                                <ice:panelGroup style="vertical-align: top;">
                                    <h4 class="box_heading" style="padding: 3px">Chat</h4>
                                    <div style="height: 380px; overflow-y:auto; overflow-x: hidden; width: 400px;" id="chat" >
                                        <ice:dataTable value="#{chatBean.textList}" var="current" style="vertical-align: bottom" >
                                            <ice:column>
                                                <script type="javascript">
                                                    var objDiv = document.getElementById("chat");
                                                    objDiv.scrollTop = objDiv.scrollHeight;
                                                </script>
                                                <ice:outputText value="#{current.text}"/>
                                            </ice:column>
                                        </ice:dataTable>
                                    </div>
                                </ice:panelGroup>

                            </ice:panelGrid>
                            <ice:form id="Form1" >
                                <ice:inputText styleClass="chatform" value="#{chatBean.message}" style="width: 420px" action="#{chatBean.sendMessage}" />
                                <ice:commandLink id="buttonSave" action="#{chatBean.sendMessage}">
                                    <ice:graphicImage value="./resources/images/send_button.png" style="vertical-align:middle"/>
                                </ice:commandLink>
                            </ice:form>
                        </ice:panelGroup>
                        <ice:panelGroup>
                            <ice:panelGroup>
                                <div style="padding:15px;">
                                    <h3 class="box_heading" style="padding: 3px">Global Ranking</h3>
                                    <div style="height: 98px; overflow:auto; width: 300px; vertical-align: top;" id="rank" >
                                        <ice:dataTable columnWidths="200px,100px" value="#{chatBean.ranking}" var="currentC" >
                                            <ice:column >
                                                <ice:outputText value="#{currentC.user}" style=" font-weight: bold; color: #FF8C00;" />
                                                </ice:column>
                                            <ice:column >
                                                { <ice:outputText value="#{currentC.punti}" /> }
                                            </ice:column>
                                            
                                        </ice:dataTable>
                                    </div>
                                </div>
                            </ice:panelGroup>
                            <ice:panelGroup >
                                <div style="padding:15px;">
                                    <h3 class="box_heading" style="padding: 3px; margin-bottom: 5px;">Started Games</h3>
                                    <ice:form id="tableList">
                                    <div style="height: 100px; overflow:auto; width: 300px; vertical-align: middle;" id="games" >
                                        <ice:dataTable value="#{chatBean.tableList}" var="current2" >
                                                <ice:column>
                                                    <ice:outputText value="#{current2.name}" style=" font-weight: bold; color: #FF8C00 " /> Table
                                                    (<ice:outputText value="#{current2.playersList.size()}" /> / 4) -
                                                    <ice:outputText value="#{current2.userWatchingNumber}" />
                                                    <ice:commandLink action="table"
                                                                     actionListener="#{userManager.joinTable(current2.name)}">
                                                        <ice:graphicImage style="vertical-align: bottom;" value="./resources/images/join_button_small.png" />
                                                    </ice:commandLink>
                                                </ice:column>
                                            </ice:dataTable>
                                    </div>
                                    </ice:form>
                                </div>
                            </ice:panelGroup>
                            <ice:panelGroup rendered="#{userManager.chatting}">
                                <div style="padding:15px;">
                                    <ice:form id="create">
                                        <h3 class="box_heading" style="padding: 3px;  margin-bottom: 5px;">Create Table</h3>
                                        Select how many bots do you want in your game:
                                        <ice:selectOneMenu value="#{chatBean.bots}">
                                            <f:selectItem itemValue="0" itemLabel="0" />
                                            <f:selectItem itemValue="1" itemLabel="1" />
                                            <f:selectItem itemValue="2" itemLabel="2" />
                                            <f:selectItem itemValue="3" itemLabel="3" />
                                            
                                        </ice:selectOneMenu>
                                        <center>
                                        <ice:commandLink action="table" style="text-align:center;"
                                                        actionListener="#{chatBean.createTable()}">
                                            <ice:graphicImage style="vertical-align: bottom; text-align: center; padding: 4px; width: 190px;" value="./resources/images/start_button.png" />
                                        </ice:commandLink>
                                            </center>
                                    </ice:form>
                                </div>
                            </ice:panelGroup>

                            
                        </ice:panelGroup>
                    </ice:panelGrid>


                </ice:panelGroup>
                <!--not logged-->
                <ice:form id="log">
                    <ice:panelGroup rendered="#{!userManager.loggedIn}">
                        <center>You are not Logged in. Please login. <br/>
                            <ice:commandLink value="Login" action="login" /></center>
                    </ice:panelGroup>
                </ice:form>
            </ui:define>

        </ui:composition>

    </h:body>
</html>

